@mixin font-dpr($font-size) {
  font-size: $font-size;
  [data-dpr='2'] & {
    font-size: $font-size * 2;
  }
  [data-dpr='3'] & {
    font-size: $font-size * 3;
  }
}

/* 消除浮动 float */
@mixin clearfix {
  display: inline-block;
  &:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & {
    height: 1px;
  }
}

/* ==========  mixin 文本单行溢出隐藏 ========== */
@mixin text-overflow($max-width) {
  max-width: $max-width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@mixin textOverflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 文本多行溢出隐藏 */
@mixin line-clamp($line) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

/**
 * ! NOTE Taro 编译成 RN 时对 border 的处理有问题
 * RN 不支持针对某一边设置 style，即 border-bottom-style 会报错
 * 那么 border-bottom: 1px 就需要写成如下形式：
 * border: 0 style color; border-bottom-width: 1px;
 */
@mixin border($dir, $width, $style, $color) {
  border: 0 $style $color;
  @each $d in $dir {
    #{border-#{$d}-width}: $width;
  }
}
